<template>
  <div class="content_box">
    <div class="nr">
      <picker v-if="array.length" class="picker" @change="PickerChange" :range="array" range-key="pjName">
        <div class="box">
          <p class="title" style="margin-bottom:0">选择团购订单<span>*</span></p>
          <p class="changeOrder">{{orderName}} <van-icon name="arrow" /></p>
        </div>
      </picker>

      <div class="box" v-else>
          <p class="title" style="margin-bottom:0">选择团购订单<span>*</span></p>
          <p class="changeOrder">暂无已完成的团购订单</p>
        </div>
      
      <div class="photo" :style="{paddingBottom:isIphoneXnum+'px'}">
        <p class="title">上传凭证<span>*</span></p>
        <div class="box1">
          <div class="nr1">
            <block v-if="query.picUrl.length">
              <div class="img_box" v-for="(item,index) in query.picUrl" :key="index">
                <img @click="preview(item)" :src="item" alt="">
                <p class="close" @click="close(index)">
                  <van-icon name="cross" size="12"/>
                </p>
              </div>
            </block>
            <div class="img" @click="changeImg">
              <img mode="widthFix" src="/static/images/photo.png" alt="" />
              <p>上传凭证</p>
            </div>
          </div>
          <div class="text_t">
            <p class="text">上传截图或者照片</p>
            <p class="text">单张图片大小不超过10M，最多上传3张</p>
          </div>
        </div>
      </div>
    </div>
    <div class="bz">
      <p>温馨提示：</p>
      <p>1.评价至少上传3张图片</p>
      <p>2.评价内容20字以上，鼓励参考性评论，如环境如何、体验如何、麻将手感及整体感受如何等</p>
      <p>3.审核通过后直接发放到账户</p>
    </div>
    <div class="button_box">
      <div class="box1" :style="{paddingBottom:isIphoneXnum+'px'}">
        <button :disabled="disabled" class="button" @click="submit">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  addRebate,
  getGroupOrder
} from "@/api/index";
import { mapState,mapActions } from 'vuex'
import { getToken,getRefreshToken,getUserPhone } from "@/utils/auth";
export default {
  data(){
    return{
      orderName:'请选择订单',
      query:{
        mobile:'',
        picUrl:[]
      },
      isIphoneXnum:0,
      disabled:false,
      array:[],
    }
  },
  computed: {
    ...mapState({
      storeId: state => state.user.storeId,
    })
  },
  methods:{

    PickerChange(e){
      let index = +e.mp.detail.value
      this.orderName = this.array[index].pjName
      this.query.orderId = this.array[index].id
      this.query.orderType = this.array[index].payType
      this.query.roomName = this.array[index].roomName
      this.query.mobile = getUserPhone()
    },
    
    // 查询团购订单
    getOrderList(){
      getGroupOrder().then(res=>{
        if(res.statusCode == '00000'){
          res.data.map(item=>{
            item.pjName = `${item.payType == 2?'美团':'抖音'}-${item.roomName}-消费金额(${item.realPrice})`
          })
          this.array = res.data
        }
      })
    },
  
    // 图片上传
    changeImg(){
      if(this.query.picUrl.length >= 3){
        this.$toast('最多上传3张！')
        return
      }
      let arr = []
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success :(res)=>{
          wx.showLoading({title: '上传中...'})
          //console.log(res)
          // tempFilePath可以作为img标签的src属性显示图片
          wx.uploadFile({
            url: 'https://gxegateway.jiuzhours.com/rich-sparrow-god/file/fileUpload',
            name: 'file',
            method: 'POST',
            filePath: res.tempFilePaths[0],
            header: {
              'Authorization': `Bearer ${getToken()}`,
              'refreshToken':getRefreshToken(),
            },
            formData: {
              file: res.tempFilePaths[0],
            },
            success: (res) => {
              this.$toast('上传成功！')
              let returnData = JSON.parse(res.data)
              arr.push(returnData.data)
              this.query.picUrl = this.query.picUrl.concat(arr)
              //console.log(this.query.picUrl)
            },
            fail: (err) => {
              //console.log(err)
              this.$toast('上传失败，请重新上传！')
              wx.hideLoading()
            }
          })
          
        }
      })
    },

    // 删除图片
    close(index){
      let arr = []
      arr = this.query.picUrl
      arr.splice(index, 1)
      this.query.picUrl = []
      this.query.picUrl = arr
    },

    // 图片预览
    preview(img){
      wx.previewImage({
        current: img, // 图片的地址url
        urls: this.query.picUrl // 预览的地址url
      })
    },

    
    submit(){
      const _this = this;
      //console.log(this.query)
      const reg = /^1[3456789]\d{9}$/
      if(_this.orderName == '请选择订单'){
        this.$toast('请选择订单!')
        return
      }
      if(!_this.query.picUrl.length){
        this.$toast('请上传图片!')
        return
      }
      wx.showModal({
        title: '提示',
        content: '请确认信息是否无误！是否提交？',
        success: function (res) {
          if (res.confirm) {
            wx.showLoading({title: '提交中...'})
            _this.disabled = true
            addRebate(_this.query).then(res=>{
              if(res.statusCode == '00000'){
                setTimeout(() => {
                  wx.redirectTo({
                    url: "/pages/pinglun/formData/success/main",
                  });
                }, 2000);
              }else{
                _this.disabled = false
                wx.hideLoading()
                _this.$toast(res.message)
              }
            })
          } else if (res.cancel) {
            //console.log('用户点击取消')
          }
        }
      })
      return
      
    }
  },
  onShow(){
    this.disabled = false
    this.getOrderList()
  },
  onLoad(options){
    this.query.picUrl = []
    this.orderName = '请选择订单'
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        //console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
  }
}
</script>

<style lang="scss" scoped>
.content_box{
  min-height: 100vh;  
  padding:32rpx;
  background: linear-gradient(180deg, rgba(0,194,0,0.6) 0%, #f5f5f5 100%);
  .nr{
    padding:30rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;
    .box{
      border-bottom:1px solid #f5f5f5;
      margin-bottom:24rpx;
      font-size: 30rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      color: #111111;
      span{
        font-size: 28rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #666666;
      }
      input{
        border:1px solid #aaa;
        border:none;
      }
      .changeOrder{
        display: flex;
        justify-content: space-between;
        height: 100rpx;
        align-items: center;
        color:#666;
      }
    }
  }
  .bz{
    font-size:28rpx;
    margin-top:30rpx;
    line-height: 40rpx;
  }
  .title{
    font-size:32rpx !important;
    font-weight: 500;
    color:#252628;
    margin-bottom:24rpx; 
    span{
      color:#FF4622 !important;
    }
  }
  .photo{
    margin-bottom:30rpx;
    
    .box1{
      .nr1{
        display: flex;
        flex-wrap:wrap;
      }
      .img{
        width: 140rpx;
        height: 140rpx;
        background: #F8F8F8;
        border-radius: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction:column;
        margin-right:20rpx;
        img{
          width: 48rpx;
          height: 48rpx;
        }
        p{
          font-size:24rpx;
          color:#999DA0;
          margin-top:8rpx;
        }
      }
      .img_box{
        width: 140rpx;
        height: 140rpx;
        position: relative;
        margin-right:40rpx;
        display: inline-block;
        margin-bottom:20rpx;
        img{
          width: 140rpx;
          height: 140rpx;
          border-radius: 20rpx;
        }
        .close{
          position: absolute;
          top: -12rpx;
          right: -16rpx;
          width: 34rpx;
          height: 34rpx;
          background: #333;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color:#fff;
        }
      }
      .text_t{
        color:#999DA0;
        font-size:26rpx;
        margin-top:24rpx;
      }
    }
  }
  .input{
    padding:20rpx;
    background: #f8f8f8;
    font-size:30rpx;
    width: 86%;
    margin:30rpx auto 32rpx auto;
    border-radius: 20rpx;
    display: flex;
    justify-content: space-between;
  }
  .button_box{
    width: 100%;
    height: 144rpx;
    .box1{
      width: 100%;
      height: 144rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom:0;
      left:0;
      border-top:1px solid #D9D9D9;
      background: #fff;
    }
    .button{
      background: #00C200;
      color: #fff;
      font-size: 30rpx;
      text-align: center;
      height: 96rpx;
      width: 90%;
      line-height: 96rpx;
      border-radius: 50rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .button::after{
      border:none;
    }
  }
}
</style>